<template>
    <div class="add-goods-container">
        <breadCrumb title="添加商品"></breadCrumb>

        <el-card style="height: 1000px;">
            <el-alert title="添加商品信息" center class="el-icon-info" type="info">
            </el-alert>
            <el-steps :active="active" align-center  style="margin: 20px 0;" finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>

    <el-tabs tab-position="left" @tab-click="handleClick" :before-leave="doBeforeLeave">
    <el-tab-pane label="基本信息">
        <el-form :model="formData" :rules="rules" ref="formData">
            <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="formData.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
                <el-input v-model="formData.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
                <el-input v-model="formData.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
                <el-input v-model="formData.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat" label-position="top">
                <div class="block">
                <el-cascader
                    v-model="formData.goods_cat"
                    :options="tab"
                    :props="{ value: 'cat_id',label: 'cat_name' }"
                    show-all-levels: false
                    clearable
                    @change="cateChanged"
                    ></el-cascader>
                </div>
                <!-- <el-select placeholder="请选择" v-model="formData.goods_cat">
                    <el-option v-for="item in tab" :key='item.cat_id' :label="item.cat_name" :value="item.cat_name" ></el-option>
                </el-select> -->
            </el-form-item>
        </el-form>
    </el-tab-pane>
    <el-tab-pane label="商品参数">1</el-tab-pane>
    <el-tab-pane label="商品属性"></el-tab-pane>
    <el-tab-pane label="商品图片">
        <el-upload
            class="upload-demo"
            action='http://vue-shop-api-t.itheima.net/api/private/v1/upload'
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="formData.pics"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    </el-tab-pane>
    <el-tab-pane label="商品内容">
        <quillEditor></quillEditor>
        <el-button type="primary" @click="doAddGoods">添加商品</el-button>
    </el-tab-pane>
  </el-tabs>
        </el-card>
    </div>
</template>

<script>
import { getCategories, postGoods } from '@/api/goods'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'ShoppingAddGoods',
  components: {
    quillEditor
  },
  data () {
    return {
      flag: true,
      value: [],
      tab: [],
      active: 0,
      formData: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        goods_cat: '',
        pics: [],
        goods_introduce: '',
        attrs: [{
          attr_id: '',
          attr_value: ''
        }]
      },
      rules: {
        goods_name: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '输入内容', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '输入内容', trigger: ['change', 'blur'] }
        ]
      }
    }
  },

  async created () {
    const res = await getCategories()
    console.log(res.data)
    this.tab = res.data
  },

  methods: {
    async doAddGoods () {
      this.formData.goods_cat = this.formData.goods_cat.join(',')
      console.log(this.formData.goods_cat)
      await postGoods(this.formData)
      this.$router.back()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleClick (tab, event) {
      if (this.flag === false) return
      this.active = Number(tab.index)
    },
    cateChanged () {
      if (this.formData.goods_cat.length !== 3) {
        this.formData.goods_cat = []
      }
    },
    doBeforeLeave (activeName, oldActiveName) {
      console.log(activeName, oldActiveName)
      if (oldActiveName === '0') {
        this.$refs.formData.validate((valid) => {
          this.flag = valid
        })
      }
      return this.flag
    }

  }
}
</script>

<style lang="less" scoped>
.ql-container {
    height: 400px !important;
    border-bottom: 1px solid #CCCCCC;
}
</style>
